<template>
	<view class="flexWrap">
		<view class="flexWrapLeft" @click="itemClick('热门推荐','0')">
			<view class="flexWrapLeftTitle">热门推荐</view>
			<image class="flexWrapLeftImg" src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/zu1.png"></image>
		</view>
		<view class="flexWrapRight">
			<view class="flexWrapRightTop" @click="itemClick('行服套装','5')">
				<view class="flexWrapRightTopTitle">行服套装</view>
				<image class="flexWrapRightTopImg" src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/zu2.png"></image>
			</view>
			<view class="flexWrapRightBottom" @click="itemClick('热门搭配','6')">
				<view class="flexWrapRightTopTitle">热门搭配</view>
				<image class="flexWrapRightBottomImg" src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/zu3.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			itemClick(name, type) {
				if (type) {
					uni.navigateTo({
						url: '/pages_category_page1/goodsModule/goodsList?name=' + name +'&contentType=' +type
					})
				} else {
					uni.navigateTo({
						url: '/pages_category_page1/goodsModule/goodsList?name=' + name
					})
				}

			}
		}

	}
</script>

<style scoped lang="scss">
	.flexWrap {
		width: 690upx;
		height: 396upx;
		margin: 36upx auto 0 auto;
		display: flex;
		justify-content: space-between;
		

		.flexWrapLeft {
			width: 332upx;
			height: 100%;
			background: linear-gradient(180deg, #FFEADD 0%, #FFFFFF 42%, #FFFFFF 100%);
			border-radius: 16upx;

			.flexWrapLeftTitle {
				color: #333;
				font-size: 28upx;
				font-weight: bold;
				margin: 36upx 0 16upx 24upx;
			}

			.flexWrapLeftImg {
				width: 260upx;
				height: 280upx;
				margin: 0 auto;
				display: block;
			}
		}

		.flexWrapRight {
			width: 334upx;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.flexWrapRightTop {
				background-image: url('../static/images/appointment/bg_hang.png');
			}

			;

			.flexWrapRightBottom {
				background-image: url('../static/images/appointment/bg_fu.png');
			}

			;

			.flexWrapRightTop,
			.flexWrapRightBottom {
				width: 100%;
				height: 186upx;
				background-size: 100% 100%;
				position: relative;
			}

			;

			.flexWrapRightTopTitle {
				color: #333;
				font-size: 28upx;
				font-weight: bold;
				position: absolute;
				top: 36upx;
				left: 24upx
			}

			.flexWrapRightTopImg {
				width: 232upx;
				height: 178upx;
				float: right;
			}

			.flexWrapRightBottomImg {
				width: 182upx;
				height: 130upx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>
